import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'umi';
import { Alert, Button, Space, Tag, notification, Row, Col, Card, Statistic, Tooltip } from 'antd'
import PopImgShow from '@/components/PopImgShow';
import TableDataBlock from '@/components/TableDataBlock';
import { promoter_customer_status } from '@/common/contact'
import { ExclamationCircleOutlined, } from '@ant-design/icons'
const promoterCheckList = (props) => {
    const { loading, dispatch, list, promoterId, data } = props;
    const childRef = useRef();
    const [visible, setVisible] = useState(false);
    const [checkVisible, setCheckVisible] = useState(false)
    const [selectedRow, setSelectedRow] = useState({
        selectedRowKeys: [],
        type: 'checked',
        preserveSelectedRowKeys: true,
        getCheckboxProps: (record) => {
            const { status } = record
            return {
                disabled: status !== '0',
                // Column configuration not to be checked
                id: record.id,
            };
        },
        onChange: (val, selectedRows) => {
            setSelectedRow({
                ...selectedRow,
                selectedRowKeys: val,
            });
        },
    });
    const { saleMoney, saleOrderAmount, settledCommission, commission } = data
    const searchItems = [
        {
            label: '订单号',
            name: 'orderSn',
        },
        {
            label: '用户姓名',
            name: 'keyword',
        },
        {
            label: '状态',
            name: 'status',
            type: 'select',
            select: promoter_customer_status,
        },
    ];

    // table 表头
    const getColumns = [
        {
            title: '头像/昵称',
            width: 180,
            dataIndex: 'profile',
            render: (e, record) => {
                const { username } = record
                return <Space>
                    <PopImgShow url={e}></PopImgShow>
                    {username}
                </Space>
            }
        },
        {
            title: '推广员姓名',
            dataIndex: 'promoterName',
        },
        {
            title: '状态最后变更时间',

            dataIndex: 'updateTime',
        },
        {
            title: '已结算订单金额',

            dataIndex: 'saleMoney',
        },
        {
            title: '已结算订单数',

            dataIndex: 'saleOrderAmount',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (e) => {
                return promoter_customer_status[e]
            }
        },

    ];
    const handleCallback = () => {
        childRef.current.fetchGetData();

    };

    return (
        <Row gutter={24}>
            <Col span={8}>
                <Card>
                    <Statistic value={saleOrderAmount} title={<div style={{ color: '#333333' }}>已结算订单总数<Tooltip title='推广员产生的自购分佣订单笔数与累计客户在绑定期间产生的推广订单笔数之和(仅统计已结算订单）'>
                        <ExclamationCircleOutlined></ExclamationCircleOutlined>
                    </Tooltip>
                    </div>}>
                    </Statistic>
                </Card>
            </Col>
            <Col span={8}>
                <Card>
                    <Statistic value={saleMoney} title={<div style={{ color: '#333333' }}>已结算订单总金额 (元)
                        <Tooltip title='该推广员产生的自购分佣订单金额与累计客户在绑定期间产生的推广订单金额之和(仅统计已结算订单，剔除结算前产生的退款金额)'>
                            <ExclamationCircleOutlined></ExclamationCircleOutlined>
                        </Tooltip>
                    </div>}>
                    </Statistic>
                </Card>

            </Col>
            <Col span={8}>
                <Card>
                    <Statistic precision={2} value={commission} title={<div style={{ color: '#333333' }}>已结算商品佣金 (元)<Tooltip title='该推广员产生的自购订单佣金金额与累计客户在绑定期间产生的推广订单佣金金额之和(仅统计已结算订单，剔除结算前产生的退款金额)'>
                        <ExclamationCircleOutlined></ExclamationCircleOutlined>
                    </Tooltip>
                    </div>}>
                    </Statistic>
                </Card>

            </Col>

            <Col span={24}>
                <TableDataBlock

                    cRef={childRef}
                    loading={loading}
                    params={{
                        promoterId
                    }}
                    searchItems={searchItems}
                    columns={getColumns}
                    rowKey={(record) => `${record.id}`}
                    dispatchType="promoter/fetchListPromoterUser"
                    {...list}
                ></TableDataBlock>
            </Col>

        </Row>
    );
};

export default connect(({ promoter, loading }) => ({
    list: promoter.promoterUserRelationLogList,
    loading: loading.models.promoter,
}))(promoterCheckList);
